
// 定义模板
const template = document.createElement('template');
template.innerHTML = `
 <div class="info-box">
  <span class="info-box-icon bg-info"><i class="far fa-envelope"></i></span>
  <div class="info-box-content">
    <span class="info-box-text">Messages</span>
    <span class="info-box-number">1,410</span>
  </div>
</div>
  <!-- Control Sidebar -->
  <aside class="control-sidebar control-sidebar-dark">
    <!-- Control sidebar content goes here -->
    <div class="p-3">
      <!-- Content of the sidebar goes here -->
    </div>
  </aside>
  <!-- /.control-sidebar -->
    `;

// 定义新的自定义元素
class MyCustomElement extends HTMLElement {
    constructor() {
        super();

        // 创建影子DOM并将模板克隆到其中
        const shadowRoot = this.attachShadow({ mode: 'open' });
        shadowRoot.appendChild(template.content.cloneNode(true));
        // 动态加载外部样式表
        const linkElem = document.createElement('link');
        linkElem.setAttribute('rel', 'stylesheet');
        linkElem.setAttribute('href', '/adminLTE/css/adminlte.min.css'); // 替换为您的CSS文件路径
        shadowRoot.appendChild(linkElem);
    }
}

// 注册新的自定义元素
customElements.define('my-custom-element', MyCustomElement);